<template>
  <div class="profile">
    <!-- 1.头部标题 -->
    <profile-nav-bar></profile-nav-bar>

    <!-- 2.头部登录 -->
    <profile-header @click.native="isShow = true"/>

    <!-- 3.登录弹框 -->
    <profile-login :show="isShow" @hide="isShow = false"></profile-login>

    <!-- 4.个人信息 -->
    <info :list="infoList"/>

    <!-- 5.vip -->
    <list-view :list="orderList"/>

    <!-- 6.app -->
    <list-view :list="serviceList" @collect="handle"/>

    <!-- 7.弹窗 -->
    <toast ref="collect" show="collect" @hide="handleCollect">
      <img src="~assets/img/common/arrow-left.svg">
    </toast>
    <toast ref="download" show="app" @hide="handleDownload"></toast>
  </div>
</template>

<script>
  import animate from '../../animate.js'
  import ProfileHeader from "./childcpn/ProfileHeader"
  import ProfileNavBar from "./childcpn/ProfileNavBar"
  import ProfileLogin from "./childcpn/ProfileLogin"
  import Info from "./childcpn/Info"
  import ListView from "./childcpn/ListView"
  import Toast from "./childcpn/Toast"

  import message from '../../assets/img/profile/message.png'
  import pointer from '../../assets/img/profile/pointer.png'
  import vip from '../../assets/img/profile/vip.png'
  import cart from '../../assets/img/profile/cart.png'
  import app from '../../assets/img/profile/app.png'

  export default {
    name: 'Profile',
    components: {
      ProfileHeader,
      Info,
      ListView,
      ProfileNavBar,
      ProfileLogin,
      Toast
    },
    data() {
      return {
        isShow: false,
        infoList: [
          {
            num: 0.00,
            unit: '元',
            my: '我的余额'
          },
          {
            num: 0,
            unit: '个',
            my: '我的优惠'
          },
          {
            num: 0,
            unit: '分',
            my: '我的积分'
          }
        ],
        orderList: [
          { icon: message, info: '我的消息' },
          { icon: pointer, info: '积分商城' },
          { icon: vip, info: '会员卡' },
        ],
        serviceList: [
          { icon: app, info: '我的收藏夹' },
          { icon: cart, info: '下载购物APP' },
        ],
        collect: false,
        app: false
      }
    },
    methods: {
      handleCollect() {
        animate(this.$refs.collect.$el, {
          top: '100%'
        }, 300)
      },
      handleDownload() {
        animate(this.$refs.download.$el, {
          top: '100%'
        }, 300)
      },
      handle(act) {
        this.$toast.show('', 0)
        switch(act) {
          case '我的收藏夹':
            this.collect = 'collect'
            animate(this.$refs.collect.$el, {
              top: '0%'
            }, 300)
            break
          case '下载购物APP':
            this.app = 'app'
            animate(this.$refs.download.$el, {
              top: '0%'
            }, 300)
            break
          default: 
            break
        }
      }
    },
    activated () {
      this.isShow = this.$route.query.login
    },
    created () {
      this.isShow = sessionStorage.getItem('username')
      if(this.isShow) {
        this.$store.commit('login', this.isShow)
        console.log(this.$store.state.currentUser)
      }
    }
  }
</script>

<style scoped>
  .profile {
    position: relative;
  }
</style>
